<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 100vh;
        overflow: hidden;
        justify-content: center;
      }
      .panel {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50px;
        height: 80vh;
        margin: 10px;
        flex: 0.5;
        transition: all 700ms ease;
        cursor: pointer;
      }
      .container {
        display: flex;
        width: 90vw;
      }
      .panel.active {
        flex: 5;
      }
      @media (max-width: 680px) {
        .container {
          width: 100vw;
        }
        .panel:nth-of-type(4),
        .panel:nth-of-type(5) {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <div class="container ">
      <div
        class="panel active"
        style="background-image: url(./imgs/photo_1.jpg)"
      ></div>
      <div
        class="panel"
        style="background-image: url(./imgs/photo_2.jpg)"
      ></div>
      <div
        class="panel"
        style="background-image: url(./imgs/photo_3.jpg)"
      ></div>
      <div
        class="panel"
        style="background-image: url(./imgs/photo_4.jpg)"
      ></div>
      <div
        class="panel"
        style="background-image: url(./imgs/photo_5.jpg)"
      ></div>
    </div>
    <script>
      // let num = document.querySelector('.container');
      // console.log(num);
      let panels = document.querySelectorAll('.panel');
      panels.forEach((panel) => {
        panel.onclick = () => {
          removeActiveClasses();
          panel.classList.add('active');
        };
      });

      function removeActiveClasses() {
        panels.forEach((panel) => {
          panel.classList.remove('active');
        });
      }
    </script>
  </body>
</html>
